<template>
	<view class="flex-col justify-start relative page">
		<view class="section"></view>
		<image class="image pos" @click="gobacks" src="/static/assets9/d88d1ea18d9f1749015a1248bb8ed0fa.png" />

		<!-- 	<view class="">
		<text class="text pos_2">待接单</text>
		<image class="image_2 pos_3" src="/static/assets9/fac8e1ec31e66f265ccf73b4a5c2c5d5.png" />
	</view> -->

		<!-- 	<view class="">
		<text class="text pos_2">陪玩接单</text>
		<image class="image_2 pos_3" src="/static/assets9/fac8e1ec31e66f265ccf73b4a5c2c5d5.png" />
	</view> -->


		<!-- 	<view class="">
		<text class="text pos_2">陪玩出发</text>
		<image class="image_2 pos_3" src="/static/assets9/fac8e1ec31e66f265ccf73b4a5c2c5d5.png" />
	</view>
	 -->
		<!--  <view class="">
  	<text class="text pos_2">陪玩到达</text>
  	<image class="image_2 pos_3" src="/static/assets9/fac8e1ec31e66f265ccf73b4a5c2c5d5.png" />
  </view> -->

		<view class="">
			<view class="cjsd">
				<text class="text pos_2">服务中</text>
				<image class="image_2 pos_3" src="/static/assets9/fac8e1ec31e66f265ccf73b4a5c2c5d5.png" />
			</view>
			<view class="dj6a">
				<view class="shjx">
					服务倒计时
				</view>
				<view class="" style="margin-left: 20rpx;">
					<up-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></up-count-down>
				</view>
			</view>
		</view>

		<!--  <view class="">
  	<text class="text pos_2">服务完成</text>
  	<image class="image_2 pos_3" src="/static/assets9/fac8e1ec31e66f265ccf73b4a5c2c5d5.png" />
  </view> -->

		<!--  <view class="">
  	<text class="text pos_2">服务完成</text>
  	<image class="image_2 pos_3" src="/static/assets9/fac8e1ec31e66f265ccf73b4a5c2c5d5.png" />
  </view> -->

		<view class="flex-col justify-start section_2 pos_4">
			<image class="image_1 pos_1" src="/static/assets9/118fbcef69e174040d693a3829ee9733.png" />
			<view class="flex-col relative">
				<view class="flex-col justify-start items-center self-center section_3">
					<view class="group">
						<text class="text_2">
							正在赶往目的地
							<br />
						</text>
						<text class="font text_3">
							距您12km
							<br />
						</text>
						<text class="font text_4">预计20分钟</text>
					</view>
				</view>
				<view class="flex-col justify-start items-end self-stretch relative group_2">
					<image class="image_4" src="/static/assets9/af1faa7a1e88a3f9a8452846caf03578.png" />
					<image class="image_3 pos_5" src="/static/assets9/c23dfeba40a9e0fd9f1d3f2fbeac607f.png" />
				</view>
			</view>
		</view>
		<view class="flex-col section_4 pos_6">
			<view class="flex-row items-center self-stretch group_3">
				<image class="image_5" src="/static/assets9/b8b2c98c6c4c9491bd007c06e0fa5194.png" />
				<text class="font_2 text_5 ml-5">杨紫夏</text>
			</view>
			<view class="flex-row justify-between self-stretch group_4">
				<view class="flex-row">
					<image class="image_6" src="/static/assets9/83583be68c7202425e7e955af6aa904d.png" />
					<view class="flex-col items-start self-start group_5 ml-9">
						<text class="font_3 text_6">City walk</text>
						<text class="font_4 text_8 mt-17">60分钟</text>
					</view>
				</view>
				<view class="flex-col self-start group_6">
					<view class="flex-row self-stretch">
						<image class="shrink-0 image_7" src="/static/assets9/77e16a4affeb34025646e1b02ebcd8a6.png" />
						<text class="font_3 text_7 ml-7">188</text>
					</view>
					<text class="self-end font_4 text_9 mt-21">x 2</text>
				</view>
			</view>
			<view class="flex-row justify-between self-stretch group_7">
				<text class="font_5 text_10">服务时间</text>
				<text class="font_6 text_11">2025/2/21 12:00-13:00</text>
			</view>
			<text class="self-end font_6 text_12">2025/2/21 19:00-20:00</text>
			<view class="self-stretch divider"></view>
			<view class="flex-row justify-between self-stretch group_8">
				<text class="font_5 text_13">车费详情</text>
				<text class="font_2 text_14">出租车 全程12km</text>
			</view>
			<view class="flex-row justify-between items-center self-stretch group_9">
				<text class="font_5 text_15">出行费</text>
				<text class="font_7 text_16">11</text>
			</view>
			<view class="flex-row justify-between items-baseline self-stretch group_10">
				<text class="font_5 text_17">服务费</text>
				<text class="font_7">376</text>
			</view>
			<view class="flex-row justify-between items-center self-stretch group_11">
				<text class="font_2">合计</text>
				<view class="flex-row">
					<image class="shrink-0 image_8" src="/static/assets9/30761155cdb37363626a87bf8fe2b57b.png" />
					<text class="text_18 ml-6">387</text>
				</view>
			</view>
		</view>
		<view class="flex-col section_5 pos_7">
			<view class="flex-row justify-between">
				<text class="self-start font_5 text_20">预约地址</text>
				<view class="flex-col items-end group_12">
					<text class="font_8 text_19">宋哲 13001363102</text>
					<text class="font_8">丰都县名山街道14幢7室</text>
				</view>
			</view>
			<view class="flex-row justify-between mt-17">
				<text class="font_5 text_21">支付方式</text>
				<text class="font_2 text_22">余额支付</text>
			</view>
			<view class="flex-row justify-between items-center mt-17">
				<text class="font_5 text_23">订单编号</text>
				<view class="flex-row items-center group_13">
					<text class="font_2 text_24">12345134533133131</text>
					<image class="shrink-0 image_9 ml-16" src="/static/assets9/0c5629092a46771650d749f493d4a115.png" />
				</view>
			</view>
			<view class="flex-row justify-between mt-17">
				<text class="font_5 text_25">下单时间</text>
				<text class="font_2 text_26">2025/2/20 04:40:19</text>
			</view>
		</view>
		<view class="flex-row justify-end section_6 pos_8">
			<view class="flex-col justify-start items-center text-wrapper"><text class="font_5 text_27">退款</text></view>
			<view class="flex-col justify-start items-center text-wrapper_2 ml-11">
				<text class="font_2 text_28">联系客服</text>
			</view>
			<view class="flex-col justify-start items-center text-wrapper_2 ml-11 adds">
				<text class="font_2 text_28">加时/升级</text>
			</view>
			<view class="flex-col justify-start items-center text-wrapper_2 ml-11 oksuc">
				<text class="font_2 text_28">完成服务</text>
			</view>
		</view>
		<view class="section_7 pos_9"></view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {};
		},

		methods: {
			
			gobacks() {
				// #ifdef H5
				history.back();
				// #endif
			
				// #ifdef APP
				uni.navigateBack()
				// #endif
			
			},
		},
	};
</script>

<style scoped lang="scss">
	.u-count-down{
		font-size: 40rpx !important;
		color: #F43D58 !important;
		font-weight: 700;
	}
	.u-count-down__text {
		font-size: 40rpx !important;
		color: #F43D58 !important;
		font-weight: 700;
	}

	.dj6a {
		display: flex;
		align-items: center;
	}

	.shjx {
		color: #2A222F;
		font-size: 40rpx;

	}

	.oksuc {
		border: none !important;
		background-color: #fb75d6 !important;

		text {
			color: #fff !important;
		}
	}

	.adds {
		border: 1px solid #FB75D6 !important;

		text {
			color: #FB75D6 !important;
		}
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.mt-17 {
		margin-top: 34rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.mt-21 {
		margin-top: 42rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.page {
		background-color: #ffffff;
		background-image: url('/static/assets9/e9f38f42eeda0992c8756d97ba134ccb.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.section {
			background-image: url('/static/assets9/e9f38f42eeda0992c8756d97ba134ccb.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 750rpx;
			height: 2036rpx;
		}

		.image {
			width: 48rpx;
			height: 48rpx;
		}

		.pos {
			position: absolute;
			left: 40rpx;
			top: 112rpx;
		}

		.text {
			color: #2a222f;
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: 700;
			line-height: 44.92rpx;
		}

		.pos_2 {
			position: absolute;
			left: 43.56rpx;
			top: 226.4rpx;
		}

		.image_2 {
			width: 40rpx;
			height: 40rpx;
		}

		.dj6a {
			position: absolute;
			right: 30rpx;
			top: 228rpx;
		}

		.pos_3 {
			position: absolute;
			left: 240rpx;
			top: 228rpx;
		}

		.section_2 {
			padding: 44rpx 0 38.2rpx;
			border-radius: 32rpx;
			height: 376rpx;

			.image_1 {
				border-radius: 32rpx;
				width: 670rpx;
				height: 376rpx;
			}

			.pos_1 {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
			}

			.section_3 {
				padding: 8.76rpx 0 10.36rpx;
				background-color: #fb75d6;
				border-radius: 24rpx;
				width: 186rpx;

				.group {
					line-height: 24rpx;

					.text_2 {
						color: #ffffff;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 700;
						line-height: 32rpx;
					}

					.font {
						font-size: 20rpx;
						font-family: PingFang SC;
						line-height: 25.76rpx;
						color: #ffffff;
					}

					.text_3 {
						line-height: 24rpx;
					}

					.text_4 {
						line-height: 24rpx;
					}
				}
			}

			.group_2 {
				padding: 59.8rpx 0 6rpx;

				.image_4 {
					border-radius: 8rpx;
					width: 346rpx;
					height: 124rpx;
				}

				.image_3 {
					border-radius: 64rpx;
					width: 68rpx;
					height: 68rpx;
				}

				.pos_5 {
					position: absolute;
					left: 50%;
					top: 6rpx;
					transform: translateX(-50%);
				}
			}
		}

		.pos_4 {
			position: absolute;
			left: 40rpx;
			right: 40rpx;
			top: 304rpx;
		}

		.section_4 {
			padding: 0 30rpx 43rpx 32rpx;
			background-color: #ffffff;
			border-radius: 32rpx;

			.group_3 {
				padding: 32rpx 0 23rpx;
				border-bottom: solid 2rpx #f7eff8;

				.image_5 {
					border-radius: 64rpx;
					width: 64rpx;
					height: 64rpx;
				}

				.text_5 {
					line-height: 25.56rpx;
				}
			}

			.group_4 {
				margin-top: 23rpx;

				.image_6 {
					border-radius: 32rpx;
					width: 160rpx;
					height: 160rpx;
				}

				.group_5 {
					margin-top: 12.7rpx;

					.text_6 {
						font-weight: 700;
						line-height: 29.64rpx;
					}

					.text_8 {
						line-height: 22rpx;
					}
				}

				.group_6 {
					margin-top: 12rpx;

					.image_7 {
						width: 30rpx;
						height: 26rpx;
					}

					.text_7 {
						line-height: 23.74rpx;
					}

					.text_9 {
						line-height: 17.48rpx;
					}
				}

				.font_3 {
					font-size: 32rpx;
					font-family: PingFang SC;
					color: #2a222f;
				}

				.font_4 {
					font-size: 24rpx;
					font-family: PingFang SC;
					color: #837386;
				}
			}

			.group_7 {
				margin-top: 30.88rpx;

				.text_10 {
					line-height: 25.98rpx;
				}

				.text_11 {
					margin-right: 14.48rpx;
				}
			}

			.font_6 {
				font-size: 28rpx;
				font-family: PingFang SC;
				line-height: 25.76rpx;
				font-weight: 700;
				color: #fb75d6;
			}

			.text_12 {
				margin-right: 8.48rpx;
				margin-top: 22.18rpx;
			}

			.divider {
				margin-top: 30.2rpx;
				background-color: #f7eff8;
				height: 2rpx;
			}

			.group_8 {
				margin-top: 29.98rpx;
				padding-left: 2.04rpx;

				.text_13 {
					line-height: 25.98rpx;
				}

				.text_14 {
					line-height: 25.98rpx;
				}
			}

			.group_9 {
				margin-top: 38.1rpx;
				padding: 0 3.02rpx;

				.text_15 {
					line-height: 25.88rpx;
				}

				.text_16 {
					margin-right: 4.12rpx;
					line-height: 20rpx;
				}
			}

			.group_10 {
				margin-top: 38.1rpx;

				.text_17 {
					line-height: 25.9rpx;
				}
			}

			.font_7 {
				font-size: 28rpx;
				font-family: PingFang SC;
				line-height: 20.78rpx;
				font-weight: 700;
				color: #2a222f;
			}

			.group_11 {
				margin-top: 43.94rpx;

				.image_8 {
					width: 38rpx;
					height: 32rpx;
				}

				.text_18 {
					margin-bottom: 2.44rpx;
					color: #2a222f;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 700;
					line-height: 29.68rpx;
				}
			}
		}

		.pos_6 {
			position: absolute;
			left: 40rpx;
			right: 40rpx;
			top: 704rpx;
		}

		.section_5 {
			padding: 32.92rpx 27.04rpx 39.12rpx 33.24rpx;
			background-color: #ffffff;
			border-radius: 32rpx;

			.text_20 {
				margin-top: 6.12rpx;
				line-height: 25.74rpx;
			}

			.group_12 {
				margin-right: 7.34rpx;

				.font_8 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 40rpx;
					color: #2a222f;
				}

				.text_19 {
					margin-right: 10.36rpx;
				}
			}

			.text_21 {
				line-height: 26.02rpx;
			}

			.text_22 {
				line-height: 26.02rpx;
			}

			.text_23 {
				line-height: 25.96rpx;
			}

			.group_13 {
				margin-right: 4.96rpx;

				.text_24 {
					line-height: 20.78rpx;
				}

				.image_9 {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.text_25 {
				line-height: 26.02rpx;
			}

			.text_26 {
				margin-right: 7.22rpx;
			}
		}

		.pos_7 {
			position: absolute;
			left: 40rpx;
			right: 40rpx;
			top: 1472rpx;

		}

		.font_5 {
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 25.76rpx;
			color: #837386;
		}

		.font_2 {
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 25.76rpx;
			color: #2a222f;
		}

		.section_6 {
			padding: 24rpx 40rpx;
			background-color: #ffffff;

			.text-wrapper {
				padding: 23.02rpx 0 19.06rpx;
				background-color: #ffffff;
				border-radius: 80rpx;
				width: 120rpx;
				height: 72rpx;
				border: solid 2rpx #ece5ec;

				.text_27 {
					line-height: 25.92rpx;
				}
			}

			.text-wrapper_2 {
				padding: 22.92rpx 0 19.06rpx;
				background-color: #ffffff;
				border-radius: 80rpx;
				width: 176rpx;
				height: 72rpx;
				border: solid 2rpx #c2afc3;

				.text_28 {
					line-height: 26.02rpx;
				}
			}
		}

		.pos_8 {
			height: 200rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			// top: 1848rpx;
		}

		.section_7 {
			background-color: #ffffff;
			width: 750rpx;
			height: 68rpx;
		}

		.pos_9 {
			position: absolute;
			left: 0;
			right: 0;
			top: 1968rpx;
		}
	}
</style>